<page-header></page-header>
<div nz-row>
  <!--左侧部门搜索-->
  <div nz-col nzSpan="5">
    <nz-card style="width:100%;">
      <!--搜索框-->
      <nz-input-group [nzSuffix]="suffixIconSearch">
        <input type="text" nz-input [(ngModel)]="deptSearchParam" (change)="searchDeptTree()"
               placeholder="输入部门名称查询"/>
      </nz-input-group>
      <ng-template #suffixIconSearch>
        <i nz-icon nzType="search" (click)="searchDeptTree()"></i>
      </ng-template>

      <!--部门树-->
      <nz-tree
        style="margin-top: 24px;"
        #deptTreeNode
        [nzData]="deptTree"
        (nzClick)="deptTreeClick($event)"
      ></nz-tree>
    </nz-card>
  </div>
  <!--右侧用户搜索列表-->
  <div nz-col nzSpan="19">
    <nz-card style="width:100%;">
      <div class="ant-advanced-search-form">
        <div nz-row [nzGutter]="24">
          <div nz-col [nzSpan]="8">
            <nz-form-item>
              <nz-form-label>用户名</nz-form-label>
              <nz-form-control>
                <input nz-input [(ngModel)]="userQueryParam.username" placeholder="用户登录名"
                       name="userQueryParam_username"/>
              </nz-form-control>
            </nz-form-item>
          </div>
          <div nz-col [nzSpan]="8">
            <nz-form-item>
              <nz-form-label>手机号</nz-form-label>
              <nz-form-control>
                <input nz-input [(ngModel)]="userQueryParam.phone" placeholder="手机号查询" name="userQueryParam_phone"/>
              </nz-form-control>
            </nz-form-item>
          </div>
          <div nz-col [nzSpan]="8">
            <nz-form-item>
              <nz-form-label>状态</nz-form-label>
              <nz-form-control>
                <nz-select nzAllowClear nzPlaceHolder="选择用户状态" [(ngModel)]="userQueryParam.activeFlag"
                           name="userQueryParam_activeFlag">
                  <nz-option nzLabel="可用" [nzValue]="true"></nz-option>
                  <nz-option nzLabel="禁用" [nzValue]="false"></nz-option>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
          </div>
        </div>
        <div nz-row [nzGutter]="24">
          <div nz-col [nzSpan]="18">
            <nz-form-item>
              <nz-form-label>创建时间</nz-form-label>
              <nz-form-control>
                <nz-range-picker [nzShowTime]="true" [(ngModel)]="userQueryParam.queryDate"
                                 (ngModelChange)="userQueryParamChangeDate()"
                                 name="userQueryParam_queryDate"></nz-range-picker>
              </nz-form-control>
            </nz-form-item>
          </div>
          <div nz-col [nzSpan]="6" style="text-align: right">
            <button nz-button [nzType]="'primary'" (click)="searchUserList()">查询</button>
            <button nz-button (click)="resetQuery()">重置</button>
          </div>
        </div>
        <div nz-row style="margin-bottom: 4px;">
          <div nz-col [nzSpan]="24" style="text-align: left">
            <button nz-button [nzType]="'primary'" (click)="userCreateShowModal()">新增</button>

            <button [disabled]="selectUserInfo == null" nz-button [nzType]="'default'" (click)="userUpdateShowModal()">修改</button>
            <button nz-button [nzType]="'default'" [disabled]="selectUserInfo == null"
                    nz-popconfirm
                    nzPopconfirmTitle="确定要重置密码吗?"
                    nzPopconfirmPlacement="top"
                    (nzOnConfirm)="confirmResetPwd()">重置密码</button>
            <button nz-button nzDanger [nzType]="'dashed'" [disabled]="selectUserInfo == null"
                    nz-popconfirm
                    nzPopconfirmTitle="确定要删除用户吗?"
                    nzPopconfirmPlacement="top"
                    (nzOnConfirm)="confirmDelUser()">删除</button>
          </div>
        </div>
      </div>
      <div class="search-result-list">
        <ng-template #totalTemplate let-total> 共{{ userInfoTotal }}条</ng-template>
        <nz-table #userInfoTable
                  nzShowPagination
                  nzShowSizeChanger
                  [nzFrontPagination]='false'
                  [nzShowTotal]="totalTemplate"
                  [nzData]='userInfoList'
                  [nzTotal]='userInfoTotal'
                  [(nzPageIndex)]='userInfoPageNum'
                  [(nzPageSize)]='userInfoPageSize'
                  (nzPageIndexChange)='userInfoListPageIndexChange($event)'
                  (nzPageSizeChange)='userInfoListPageSizeChange($event)'>
          <thead>
          <tr>
            <th>选中</th>
            <th>部门名称</th>
            <th>登录名</th>
            <th>昵称</th>
            <th>电话</th>
            <th>邮箱</th>
            <th>状态</th>
            <th>最后登录时间</th>
          </tr>
          </thead>
          <tbody>
          <tr (click)='onSelectUserInfoRow(data.userId,!data.selected)' *ngFor='let data of userInfoTable.data'>
            <td nzLeft [nzShowCheckbox]='true' [(nzChecked)]='data.selected'
                (nzCheckedChange)='onSelectUserInfoRow(data.userId,$event)'></td>
            <td>{{ data.deptName }}</td>
            <td>{{ data.username }}</td>
            <td>{{ data.nickName }}</td>
            <td>{{ data.phone }}</td>
            <td>{{ data.email }}</td>
            <td>
              <nz-switch [(ngModel)]="data.activeFlag"></nz-switch>
            </td>
            <td>{{ data.lastLogin | date:'yyyy-MM-dd HH:mm'  }}</td>
          </tr>
          </tbody>
        </nz-table>

      </div>
    </nz-card>
  </div>
</div>


<!-- 新增用户 -->
<nz-modal
  [(nzVisible)]="userSaveModalShowFlag"
  nzTitle="新增用户"
  [nzContent]="userCreateContent"
  [nzFooter]="userCreateFooter"
  (nzOnCancel)="userSaveHandleCancel()">

  <ng-template #userCreateContent>
    <form nz-form *ngIf="userSaveParam!=null">

      <nz-form-item>
        <nz-form-label [nzSpan]="7">用户名</nz-form-label>
        <nz-form-control [nzSpan]="12">
          <input nz-input [(ngModel)]="userSaveParam.username" name="userCreateParam_username"
                 placeholder="输入用户名(登录名)"/>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="7">昵称</nz-form-label>
        <nz-form-control [nzSpan]="12">
          <input nz-input [(ngModel)]="userSaveParam.nickName" name="userCreateParam_nickName" placeholder="输入昵称"/>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="7">所属部门</nz-form-label>
        <nz-form-control [nzSpan]="12">
          <nz-cascader nzChangeOnSelect name="userCreateParam_deptId"
                       [nzOptions]="deptCascader"
                       [(ngModel)]="selectCascaderDept"
                       (nzSelectionChange)="userSaveDeptCascaderChanges($event)"></nz-cascader>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="7">手机号</nz-form-label>
        <nz-form-control [nzSpan]="12">
          <input nz-input [(ngModel)]="userSaveParam.phone" name="userCreateParam_phone" placeholder="输入手机号"/>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="7">邮箱</nz-form-label>
        <nz-form-control [nzSpan]="12">
          <input nz-input [(ngModel)]="userSaveParam.email" name="userCreateParam_email" placeholder="输入邮箱"/>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="7">性别</nz-form-label>
        <nz-form-control [nzSpan]="12">
          <nz-select name="userCreateParam_gender" [(ngModel)]="userSaveParam.gender" nzPlaceHolder="性别">
            <nz-option [nzValue]="'0'" nzLabel="保密"></nz-option>
            <nz-option [nzValue]="'1'" nzLabel="男"></nz-option>
            <nz-option [nzValue]="'2'" nzLabel="女"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="7">状态</nz-form-label>
        <nz-form-control [nzSpan]="12">
          <nz-select name="userCreateParam_activeFlag" [(ngModel)]="userSaveParam.activeFlag" nzPlaceHolder="状态">
            <nz-option [nzValue]="true" nzLabel="正常"></nz-option>
            <nz-option [nzValue]="false" nzLabel="禁用"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="7">角色</nz-form-label>
        <nz-form-control [nzSpan]="12">
          <nz-select nzMode="multiple" name="userCreateParam_roleIdList"
                     [(ngModel)]="userSaveParam.roleIdList"
                     nzPlaceHolder="选择角色">
            <div *ngIf="roleList.length > 0">
              <nz-option *ngFor="let role of roleList" [nzValue]="role['id']" [nzLabel]="role['name']"></nz-option>
            </div>
          </nz-select>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="7">岗位</nz-form-label>
        <nz-form-control [nzSpan]="12">
          <nz-select nzMode="multiple" name="userCreateParam_positionIdList"
                     [(ngModel)]="userSaveParam.positionIdList"
                     nzPlaceHolder="选择岗位">
            <div *ngIf="positionList.length > 0">
              <nz-option *ngFor="let position of positionList" [nzValue]="position['id']"
                         [nzLabel]="position['name']"></nz-option>
            </div>
          </nz-select>
        </nz-form-control>
      </nz-form-item>


    </form>
  </ng-template>

  <ng-template #userCreateFooter>
    <button nz-button nzType="default" (click)="userSaveHandleCancel()">取消</button>
    <button nz-button nzType="primary" (click)="userSaveHandleSave()" [nzLoading]="userSaveLoading">保存</button>
  </ng-template>
</nz-modal>


